<template>
	<view>
		<skeleton :loading="loading" :row="3">
			<!-- #ifdef H5 -->
			<view class="back" @click="back">
				<uni-icons type="back" color="#000" size="20"></uni-icons>
			</view>
			<!-- #endif -->
			<!-- 地址 -->
			<view class="address">
				<view class="address_cinema">
					<view class="address_cinema_name">{{ base_data.cinemaName || '影院名称' }}</view>
					<view class="address_cinema_text">{{ base_data.address || '影院地址'}}</view>
				</view>
				<view class="address_map">
					<image class="address_map_icon" src="/static/icon/icon_dingwei.png"></image>
				</view>
			</view>
			<!-- 轮播 -->
			<view class="banner">
				<image class="banner_bg" :src="banner_info.pic" mode=""></image>
				<swiper class="banner_swiper" circular="true" previous-margin="250rpx" next-margin="270rpx"
					:current="banner_index" @change="change">
					<swiper-item v-for="(item, index) in banner_list" :key="index" @click="movieInfoBtn(item)">
						<view class="banner_swiper_item">
							<image class="banner_swiper_item_pic"
								:class="index == banner_index ? 'banner_swiper_item_active' : ''" :src="item.pic" />
						</view>
					</swiper-item>
				</swiper>
				<view class="banner_info">
					<view class="banner_info_name">
						<view class="banner_info_name_text">{{ banner_info.name }}</view>
						<view class="banner_info_name_score">{{ banner_info.grade || '暂无' }}</view>
					</view>
					<view class="banner_info_schedule">{{ banner_info.duration || '888' }}分钟 |
						{{ banner_info.filmTypes || '电影类型' }}
					</view>
				</view>
			</view>
			<!-- 场次 -->
			<view class="schedule">
				<scroll-view class="schedule_tab" scroll-x="true">
					<view class="schedule_tab_item" :class="index == schedule_tab_index ? 'schedule_tab_active' : ''"
						v-for="(item, index) in dateList" :key="index" @click="select_tab(index, item)">
						{{ item.date | formatData }}
					</view>
				</scroll-view>
				<view class="schedule_list">
					<view class="schedule_list_item" v-for="(item, index) in schedule_tab_list" :key="index"
						v-if="item.stopSellTime >= Math.floor(new Date().getTime() / 1000)">
						<view class="schedule_list_item_schedule">
							<view class="schedule_list_item_schedule_start">{{ item.showTime | formatTime }}</view>
							<view class="schedule_list_item_schedule_end">
								{{ (item.showTime * 1 + item.duration * 60) | formatTime }}散场
							</view>
						</view>
						<view class="schedule_list_item_name">
							<!-- <view class="schedule_list_item_name_language">{{item.language}}</view> -->
							<view class="schedule_list_item_name_type">{{ item.planType }}</view>
							<view class="schedule_list_item_name_room">{{ item.hallName }}</view>
						</view>
						<view class="schedule_list_item_money">
							<view class="schedule_list_item_money_now">
								<text>{{ (item.vipPrice / 100).toFixed(1) }}</text>
								元
							</view>
							<view class="schedule_list_item_money_old">市场价{{ item.netPrice / 100 }}元</view>
						</view>
						<view class="schedule_list_item_btn"
							v-if="item.stopSellTime >= Math.floor((new Date().getTime()+3,600) / 1000)"
							@click="seat_btn(item)">购票</view>
						<view class="schedule_list_item_btn_stop" v-else>停售</view>
					</view>
				</view>
			</view>
		</skeleton>
		<MyLoading :loading="loading" type="6" animation_updown="true"></MyLoading>
	</view>
</template>

<script>
	// 时间戳转日期
	function formatTime(timestamp) {
		var date = new Date(timestamp * 1000);
		var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
		var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
		return h + m;
	}
	//数组去重
	function getUnique(array) {
		let obj = {};
		return array.filter((item, index) => {
			// 防止key重复
			let newItem = item + JSON.stringify(item);
			return obj.hasOwnProperty(newItem) ? false : (obj[newItem] = true);
		});
	}
	import Skeleton from '@/components/skeleton/skeleton.vue';
	import MyLoading from '@/components/my-loading/my-loading.vue';
	import Route from '../../utils/route.js';
	import Helper from '../../utils/helper.js';
	export default {
		components: {
			MyLoading,
			Skeleton,
		},
		data() {
			return {
				loading: true,
				// 基础信息
				cinemaId: 0,
				filmId: 0,
				base_data: {},
				// 日期
				dateList: [],
				// 轮播
				banner_index: 0,
				banner_list: [],
				banner_info: {},
				// 场次
				schedule_tab_list: [],
				schedule_tab_index: 0,
				//聚合数据
				data_list: []
			};
		},
		filters: {
			formatData(data) {
				let date = new Date(data);
				let time = date.getTime() / 1000;
				let str;
				let today = new Date().setTime(Date.parse(Helper.date().replace(/-/g, '/')) / 1000 + 24 * 60 * 60 - 1);
				let tomorrow = new Date().setTime(Date.parse(Helper.date().replace(/-/g, '/')) / 1000 + 48 * 60 * 60 - 1);
				if (date.getDay() == 0) str = '周日 ' + Helper.date(date, 2);
				if (date.getDay() == 1) str = '周一 ' + Helper.date(date, 2);
				if (date.getDay() == 2) str = '周二 ' + Helper.date(date, 2);
				if (date.getDay() == 3) str = '周三 ' + Helper.date(date, 2);
				if (date.getDay() == 4) str = '周四 ' + Helper.date(date, 2);
				if (date.getDay() == 5) str = '周五 ' + Helper.date(date, 2);
				if (date.getDay() == 6) str = '周六 ' + Helper.date(date, 2);
				// if (time <= today) str = '今天 ' + Helper.date(date, 2);
				// if (today < time && time < tomorrow) str = '明天 ' + Helper.date(date, 2);
				return str;
			},
			formatTime(timestamp) {
				var date = new Date(timestamp * 1000);
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				return h + m;
			}
		},
		async onLoad(e) {
			// 接参
			this.base_data = JSON.parse(e.data);
			// 获取数据
			await this.getData();
			// 轮播数据
			this.getBannerList();
		},
		methods: {
			//获取数据
			async getData() {
				this.data_list = await Route.schedule_list({
					cinemaId: this.base_data.cinemaId,
					filmId: this.base_data.filmId || '',
					showDate: this.base_data.date || ''
				});
				this.loading = false;
			},
			//获取轮播信息
			getBannerList() {
				let arr = [];
				for (var i = 0; i < this.data_list.length; i++) {
					arr[i] = {};
					arr[i].filmId = this.data_list[i].filmId;
					arr[i].name = this.data_list[i].filmName;
					arr[i].filmTypes = this.data_list[i].filmTypes;
					arr[i].pic = this.data_list[i].pic;
					arr[i].duration = this.data_list[i].duration;
					arr[i].grade = this.data_list[i].grade;
					if (this.base_data.filmId && this.base_data.filmId == arr[i].filmId) {
						this.banner_index = i;
					}
				}
				this.banner_list = getUnique(arr);
				this.banner_info = this.banner_list[this.banner_index];
				this.dateList = this.data_list[this.banner_index].schedules;
				this.schedule_tab_list = getUnique(this.dateList[this.schedule_tab_index].list);
			},
			// 返回
			back() {
				uni.navigateBack();
			},
			// 轮播切换
			change(e) {
				this.banner_index = e.detail.current;
				this.schedule_tab_index = 0;
				this.banner_info = this.banner_list[this.banner_index];
				this.dateList = this.data_list[this.banner_index].schedules;

				this.schedule_tab_list = getUnique(this.dateList[this.schedule_tab_index].list);
			},
			//切换场次
			select_tab(e) {
				this.schedule_tab_index = e;
				this.schedule_tab_list = getUnique(this.dateList[this.schedule_tab_index].list);
			},
			// 电影详情
			movieInfoBtn(e) {
				uni.navigateTo({
					url: '../movie_info/movie_info?filmId=' + e.filmId
				});
			},
			// 购票
			seat_btn(e) {
				let data = {
					filmName: e.filmName,
					hallName: e.hallName,
					showId: e.showId,
					showDate: e.showDate,
					netPrice: e.netPrice,
					showTime: formatTime(e.showTime),
					showVersionType: e.showVersionType,
					scheduleArea: e.scheduleArea,
					filmId: e.filmId,
					cinemaName: this.base_data.cinemaName
				};
				uni.navigateTo({
					url: '../seat/seat?data=' + JSON.stringify(data)
				});
			}
		}
	};
</script>

<style lang="scss">
	//返回
	.back {
		position: absolute;
		z-index: 2;
		left: 10rpx;
		top: 10rpx;
		padding: 10rpx 20rpx;
	}

	// 头部地址
	.address {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 600rpx;
		margin: 0 auto;
		height: 133rpx;

		&_cinema {
			height: 133rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			&_name {
				font-size: $uni-font-size-lg;
				font-weight: 600;
			}

			&_text {
				font-size: $uni-font-size-base;
				color: $uni-text-color-grey;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}

		&_map {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 81rpx;
			width: 81rpx;
			border-left: 1rpx solid $uni-text-color-grey;

			&_icon {
				width: 49rpx;
				height: 49rpx;
				margin-left: 33rpx;
			}
		}
	}

	// 轮播
	.banner {
		margin-top: 33rpx;
		position: relative;

		&_bg {
			position: absolute;
			z-index: 0;
			height: 333rpx;
			width: 750rpx;
			-webkit-filter: blur(8rpx);
			-moz-filter: blur(8rpx);
			-o-filter: blur(8rpx);
			-ms-filter: blur(8rpx);
			filter: blur(8rpx);
		}

		&_swiper {
			height: 333rpx;
			display: flex;
			align-items: center;

			&_item {
				width: 250rpx;
				height: 333rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&_pic {
					width: 188rpx;
					height: 269rpx;
					display: flex;
				}

				&_active {
					animation: change 0.5s;
					animation-fill-mode: forwards;
					border: 8rpx solid #fff;
				}

				@keyframes change {
					from {
						width: 188rpx;
						height: 269rpx;
					}

					to {
						width: 200rpx;
						height: 286rpx;
					}
				}
			}
		}

		&_info {
			position: relative;
			height: 133rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			&_name {
				display: flex;
				align-items: center;

				&_text {
					font-size: $uni-font-size-lg;
				}

				&_score {
					font-size: $uni-font-size-base;
					color: $template-background;
					margin-left: 8rpx;
				}
			}

			&_schedule {
				font-size: $uni-font-size-base;
				color: $uni-text-color-grey;
			}
		}

		&_info:before {
			content: "";
			width: 0;
			height: 0;
			position: absolute;
			top: -20rpx;
			left: 0;
			right: 0;
			margin: auto;
			border-right: solid 20rpx transparent;
			border-left: solid 20rpx transparent;
			border-bottom: solid 20rpx #fff;
		}


	}

	// 场次
	.schedule {
		display: flex;
		flex-direction: column;
		align-items: center;

		&_tab {
			display: flex;
			white-space: nowrap;
			width: 750rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-bottom: 1rpx solid $template-line;
			border-top: 1rpx solid $template-line;

			&_item {
				display: inline-block;
				width: 333rpx;
				text-align: center;
			}

			&_active {
				color: $template-background;
				position: relative;
			}

			&_active:after {
				content: ' ';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 6rpx;
				width: 66%;
				height: 6rpx;
				margin: 0 auto;
				background: $template-background;
				border: 8rpx;
			}
		}

		&_list {
			width: 700rpx;

			&_item {
				padding: 33rpx 0;
				border-bottom: 1rpx solid $template-line;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&_schedule {
					display: flex;
					flex-direction: column;
					width: 166rpx;

					&_start {
						font-weight: 600;
						font-size: $uni-font-size-lg;
					}

					&_end {
						font-size: $uni-font-size-sm;
						color: $uni-text-color-grey;
					}
				}

				&_name {
					display: flex;
					flex-direction: column;
					width: 222rpx;

					&_name {
						font-size: $uni-font-size-base;
					}

					&_type {
						font-size: $uni-font-size-base;
					}

					&_room {
						font-size: $uni-font-size-sm;
						color: $uni-text-color-grey;
					}
				}

				&_money {
					width: 166rpx;
					display: flex;
					flex-direction: column;

					&_now {
						color: red;
						font-size: $uni-font-size-sm;
					}

					&_now text {
						font-size: $uni-font-size-lg;
						font-weight: 600;
					}

					&_old {
						color: $uni-text-color-grey;
						font-size: $uni-font-size-sm;
					}
				}

				&_btn {
					width: 100rpx;
					height: 66rpx;
					text-align: center;
					line-height: 66rpx;
					background: #f9ba37;
					font-size: $uni-font-size-sm;
					border-radius: $uni-border-radius-lg;
				}

				&_btn_stop {
					width: 100rpx;
					height: 66rpx;
					text-align: center;
					line-height: 66rpx;
					background: #a8a8a8;
					color: #fff;
					font-size: $uni-font-size-sm;
					border-radius: $uni-border-radius-lg;
				}
			}
		}
	}
</style>
